<!--
  Generated template for the HotelManagePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-title>餐台管理</ion-title>
    <ion-buttons end>
      <button  class="btn-header-right"  ion-button (click)="addFloor()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <div *ngIf=" TableData.length <=0" class="empty">
    <page-empty></page-empty>
  </div>
  <div class="container" *ngIf=" TableData.length > 0">
    <ng-container *ngFor="let item of TableData;let j = index">
      <div class="floor" (click)="changeState(item)">
        <span>{{item.floor}}</span>
        <button end>
          <!--<ion-icon name="{{item.show?'ios-arrow-dropup-outline':'ios-arrow-dropdown-outline'}}"></ion-icon>-->
          <ion-icon name="close-circle" color="light-blue" (click)="deleteFloor(item.floorid,j)"> </ion-icon>
        </button>
      </div>
      <div class="card-container" *ngIf="item.show" [ngClass]="item.show?'showItem animated slideInRight':'hideItem'">
        <button class="my-card" *ngFor="let table of item.tables;let i = index">
          <div class="my-card-header" [ngStyle]="{background:table.tableSite.color}">{{table.tableSite.name}}</div>
          <div class="my-card-content">
            <div>{{table.tablename}}</div>
            <!--<div>{{table.tableplace}}</div>-->
            <div>{{table.tablesize}}</div>
            <!--<div class="cus">-->
            <!--<ion-icon name="ios-person" *ngIf="room.cus&&room.cus!==''"></ion-icon>-->
            <!--{{room.cus}}-->
            <!--</div>-->
          </div>
          <div class="my-card-footer">
            <!--<span *ngIf="room.leave&&room.leave!=='';else elsePart">离店</span>-->
            <!--{{room.leave}}-->
            <!--<ng-template>-->
              <button class="room-delete-button" (click)="deleteRoom(item.floorid,table.id,i,j)">删除餐台</button>
            <!--</ng-template>-->
          </div>
        </button>
        <button class="my-card my-card-add" (click)="addtable(item.floorid)">
          <ion-icon name="ios-add"></ion-icon>
        </button>
      </div>
    </ng-container>
  </div>
</ion-content>
